<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll() {
            //让所有复选框选中
            //getElementsByName：根据指定的name属性值查询返回多个标签对象集合
            //这个集合的操作和数组一样，集合中每个元素都是dom对象，元素顺序是有序的，从前到后
            var hobbies = document.getElementsByName("hobby");
            //alert(hobbies.length)
            //alert(hobbies[1].value)
            for (var i = 0; i < hobbies.length; i++) {
                //checked表示复选框的选中状态，选中是true，不选中是false
                //checked这个属性可读可写
                hobbies[i].checked = true;
            }
        }
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
                // if (hobbies[i].checked === false) {
                //     hobbies[i].checked = true;
                // } else {
                //     hobbies[i].checked = false;
                // }
            }
        }
    </script>
</head>
<body>
    兴趣爱好
    <input type="checkbox" name="hobby" value="C++"/>C++
    <input type="checkbox" name="hobby" value="Java"/>Java
    <input type="checkbox" name="hobby" value="Python"/>Python
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>